<template>
  <div id="app">
    <div class="nav">
      <!-- <router-link to="Home" id="home" class="nav-item">Home</router-link>
      <router-link to="weather" id="weather" class="nav-item">天气</router-link> -->
      <el-dropdown placement="bottom-start">
        <span class="el-dropdown-link">
          组件菜单<i class="el-icon-caret-bottom"></i>
        </span>

        <el-dropdown-menu slot="dropdown" class="menu">
          <el-dropdown-item
            ><router-link to="Home" id="home" class="nav-item"
              >Home</router-link
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><router-link to="weather" id="weather" class="nav-item"
              >天气</router-link
            ></el-dropdown-item
          >
          <el-dropdown-item
            ><router-link to="clock" id="clock" class="nav-item"
              >时钟</router-link
            ></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <hr />
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<style lang="less">
.nav {
  position: fixed;
  left: 0.25rem;
  top: 0.1875rem;
  font-size: 0.2rem;
  display: flex;
  flex-direction: column;
  width: 1.25rem;
  height: 0.75rem;
  color: #fff;
}
.menu {
  background-color: skyblue;
  .nav-item {
    text-align: center;
    line-height: 0.375rem;
    text-decoration: none;
    color: #000;
    width: 1.25rem;
    height: 0.375rem;
  }
}
</style>
